<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>

<body class="gray-bg">
<div class="container-div ui-layout-center">
	<div class="row">
		<div class="col-sm-12 search-collapse">

			<form id="staff-form">
				<div class="select-list">
					<ul>
						<li>
							姓名：
							<input class="name" type="text" name="name" style="width: 100px" />
						</li>
						<li>
							邮箱：
							<input class="email" type="text" name="email" style="width: 100px"/>
						</li>
						<li class="select-time">
                            <label>员工入职日期： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime" style="width: 100px" />
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime" style="width: 100px" />
						</li>
						<li>
							在职状态：
							<select class="status" type="text" name="status" style="width: 100px"/>
							<option value=""></option>
							<option value="在职">在职</option>
							<option value="离职">离职</option>
							</select>
						</li>
						<li>
							员工所在地域：
							<select class="region" type="text" name="region" style="width: 100px"/>
							<option value=""></option>
							<option value="西安">西安</option>
							<option value="北京">北京</option>
							<option value="深圳">深圳</option>
							<option value="成都">成都</option>
							<option value="天津">天津</option>
							<option value="上海">上海</option>
							</select>
						</li>
						<li>
							员工技能：
							<select class="skillType" type="text" name="skillType" style="width: 100px"/>
							<option value=""></option>
							<option value="java">java</option>
							<option value="android">android</option>
							<option value="c++">c++</option>
							<option value="python">python</option>
							</select>
						</li>
						<li>
							员工职位：
							<select class="level" type="text" name="level" style="width: 100px"/>
							<option value=""></option>
							<option value="高级工程师">高级工程师</option>
							<option value="中级工程师">中级工程师</option>
							<option value="初级工程师">初级工程师</option>
							<option value="实习工程师">实习工程师</option>
							</select>
						</li>
						<li>
							<a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-success btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>

			</form>
		</div>

		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
	</div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
	var prefix = ctx + "staff/list";
	$(function () {
		$('body').layout({west__size: 185});
		load();
	});

		function load() {
		var options = {
			url: prefix + "/list",
			updateUrl: prefix + "/edit/{id}",
			modalName: "StaffView",
			search: false,
			showSearch: false,
			showExport: false,
			columns: [
				{
					field: 'id',
					title: '工号'
				},
				{
					field: 'name',
					title: '姓名'
				},
				{
					field: 'sex',
					title: '性别'
				},
				{
					field: 'phone',
					title: '电话号码'
				},
				{
					field: 'email',
					title: '邮箱'
				},
				{
					field: 'address',
					title: '住址'
				},
				{
					field: 'joinDate',
					title: '入职日期'
				},
				{
					field: 'status',
					title: '在职状态'
				},
				{
					field: 'region',
					title: '地域'
				},
				{
					field: 'skillType',
					title: '技能'
				},
				{
					field: 'level',
					title: '职位'
				}]
		};
		$.table.init(options);
	}
</script>
</body>
</html>